<template>
  <div class="box">
  	<div class="topbox">
  		<div class="box1"><h3>用餐人数</h3><input type="text" placeholder="请您确定用餐人数"></div>
  		<div class="box1">
  			<h3>到店时间</h3>
  			<div class="select">
  				<b>{{hour}}</b>
  				<i class="iconfont icon-arrLeft-fill" @click="hourShow"></i>
	  			<ul class="hbox" v-if="hourshow">
	  				<li @click="Hour(hour)" v-for="hour in hours">{{hour.h}}</li>
	  				
	  			</ul>	  			
  			</div>
  			<div class="select">  				
	  			<b>{{minute}}</b>
  				<i class="iconfont icon-arrLeft-fill" @click="minuteShow"></i>
	  			<ul class="hbox" v-if="minuteshow">
	  				<li @click="Minute(minute)" v-for="minute in minutes">{{minute.min}}</li>
	  				
	  			</ul>
  			</div>
  		</div>
  		<p>如到时间您未到店，桌位将为您预留15分钟。</p>
  	</div>
  	<div class="listbox">
  	   <h2>请选桌位</h2>
  	   <ul class="fenqu">
  	   	<li>
  	   	  <h4>A<br />区</h4>
  	   	  <ul class="zhuowei">
  	   	  	<li v-for="zhuozi in zhuoziAs" :class="zhuozi.active==1?'active':''" >   	  		 	   	  		
  	   	  		<i class="iconfont icon-zuowei":class="zhuozi.usable==1?'':'disable'" @click="iconactive(zhuozi)"></i>
  	   	  	</li>  	   	  	 	   	 
  	   	  </ul>
  	   	</li>
  	   	<li>
  	   	  <h4>B<br />区</h4>
  	   	  <ul class="zhuowei">
  	   	  	<li v-for="zhuozi in zhuoziBs" :class="zhuozi.active==1?'active':''" >   	  		 	   	  		
  	   	  		<i class="iconfont icon-zuowei":class="zhuozi.usable==1?'':'disable'" @click="iconactive(zhuozi)"></i>
  	   	  	</li>  	   	  	 	   	 
  	   	  </ul>
  	   	</li>
  	   	<li>
  	   	  <h4>C<br />区</h4>
  	   	  <ul class="zhuowei">
  	   	  	<li v-for="zhuozi in zhuoziCs" :class="zhuozi.active==1?'active':''" >   	  		 	   	  		
  	   	  		<i class="iconfont icon-zuowei":class="zhuozi.usable==1?'':'disable'" @click="iconactive(zhuozi)"></i>
  	   	  	</li>  	   	  	 	   	 
  	   	  </ul>
  	   	</li>
  	   	<li>
  	   	  <h4>D<br />区</h4>
  	   	  <ul class="zhuowei">
  	   	  	<li v-for="zhuozi in zhuoziDs" :class="zhuozi.active==1?'active':''" >   	  		 	   	  		
  	   	  		<i class="iconfont icon-zuowei":class="zhuozi.usable==1?'':'disable'" @click="iconactive(zhuozi)"></i>
  	   	  	</li>  	   	  	 	   	 
  	   	  </ul>
  	   	</li>
  	   
  	   </ul>
  	  <div class="tishibox">
  	  	<div class="box1"><h5>提示：</h5><i>A区为2人桌</i><i>B区为4人桌</i><i>C区为8人桌</i><i>D区为10人桌</i></div>
  	  	<div class="box2">
  	  		<div class="iconbox"><h4 class="iconfont icon-zuowei icon1"></h4>&nbsp;不可选</div>
  	  		<div class="iconbox"><h4 class="iconfont icon-zuowei icon2"></h4>&nbsp;可选</div>
  	  		<div class="iconbox"><h4 class="iconfont icon-zuowei icon3"></h4>&nbsp;已选</div>
  	  	</div>
  	  </div>  	  
  	</div>
  	<div class="bottombox" @click="Yuyie">预约定位</div>
  	<div class="alertbox" v-if="alertshow">
  		<i class="alertbg"></i>
  		<div class="alert">
  			<h3>预约成功</h3>
  			<p>为了减少等待时间</p>
  			<p>您是否需要马上点餐</p>
  			<div class="gobox"><i @click="Nogo">到店再点</i><router-link class="goindex" to="/index">马上点餐</router-link></div>
  		</div>
  	</div>
  </div>
</template>

<script src="../assets/js/yuyie.js"></script>
<style scoped src="../assets/css/yuyie.css"></style>
